<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>职位详情</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="$router.go(-1)"
          >
            返回
          </el-button>
        </div>
      </template>

      <el-form
        ref="form"
        :model="positionInfo"
        label-width="120px"
        :disabled="true"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职位名称">
              <el-input v-model="positionInfo.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属部门">
              <el-input v-model="positionInfo.departmentName" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招聘人数">
              <el-input v-model="positionInfo.count" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作经验">
              <el-input v-model="positionInfo.experience" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学历要求">
              <el-input v-model="positionInfo.education" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="薪资范围">
              <el-input v-model="positionInfo.salary" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发布时间">
              <el-input v-model="positionInfo.createTime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag :type="positionInfo.status === 1 ? 'success' : 'info'">
                {{ positionInfo.status === 1 ? '招聘中' : '已结束' }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="职位描述">
              <el-input
                v-model="positionInfo.description"
                type="textarea"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="任职要求">
              <el-input
                v-model="positionInfo.requirements"
                type="textarea"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 应聘记录 -->
      <div class="applications">
        <div class="section-title">应聘记录</div>
        <el-table
          :data="applications"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="应聘者"
            align="center"
            width="120"
          />
          <el-table-column
            prop="phone"
            label="联系电话"
            align="center"
            width="150"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            align="center"
            width="200"
          />
          <el-table-column
            prop="applyTime"
            label="投递时间"
            align="center"
            width="180"
          />
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="100"
          >
            <template #default="{row}">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="120"
          >
            <template #default="{row}">
              <el-button
                type="text"
                @click="handleViewResume(row)"
              >
                查看简历
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'PositionDetail',
  setup() {
    const route = useRoute()
    const positionInfo = ref({
      name: '前端开发工程师',
      departmentName: '技术部',
      count: 2,
      experience: '3-5年',
      education: '本科',
      salary: '15k-25k',
      status: 1,
      createTime: '2024-01-01 00:00:00',
      description: '职位描述...',
      requirements: '任职要求...'
    })

    const applications = ref([
      {
        name: '张三',
        phone: '13800138000',
        email: 'zhangsan@example.com',
        applyTime: '2024-01-01 10:00:00',
        status: 'pending'
      }
    ])

    const getStatusType = (status) => {
      const types = {
        pending: 'info',
        interviewing: 'warning',
        passed: 'success',
        rejected: 'danger'
      }
      return types[status] || 'info'
    }

    const getStatusText = (status) => {
      const texts = {
        pending: '待处理',
        interviewing: '面试中',
        passed: '通过',
        rejected: '未通过'
      }
      return texts[status] || '未知'
    }

    const handleViewResume = (row) => {
      // TODO: 跳转到简历详情页面
      console.log('查看简历:', row)
    }

    onMounted(() => {
      // TODO: 调用API获取职位详情
      console.log('职位ID:', route.params.id)
    })

    return {
      positionInfo,
      applications,
      getStatusType,
      getStatusText,
      handleViewResume
    }
  }
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.applications {
  margin-top: 30px;
}
</style>